<script>
	const userFactory = require('common/userFactory.js');
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		onLaunch: function() {
			console.log('App Launch')
			userFactory.getUserLocation(); // 获取位置信息
		},
		onShow: function() {
			console.log('App Show', this.userId)
			if (this.userId !== '-1') {
				let userId = this.userId
				let communityId = this.userCommunity.communityId
				let userData = {
					userId: userId,
					communityId: communityId
				}
				//  启动Socket
				this.WEBSOCKET_INIT(userData)
			}
		},
		onHide: function() {
			console.log('App Hide')
			this.WEBSOCKET_CLOSE() // 关闭socket连接
		},
		computed: {
			...mapState('user', ['userId', 'userCommunity']),
			...mapState({
				eventlist: state => state.websocket.eventlist,
				repairType: state => state.websocket.repairType
			})
		},
		methods: {
			...mapActions('websocket', ['WEBSOCKET_CLOSE', 'WEBSOCKET_INIT', 'WEBSOCKET_SEND'])
		},
		watch: {
			eventlist(val) {
				uni.showModal({
					title: '【报修】消息提醒',
					content: val,
					showCancel: false,
					confirmText: '收到',
					confirmColor: '#1395FA',
					success: (res) => {
				  if (res.confirm) {
							let socketData = {
								type: this.repairType
							}
							this.WEBSOCKET_SEND(JSON.stringify(socketData))
							uni.navigateTo({
								url: '/pages/home/repairWaiting/repairWaiting'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				// let i=0
				// const showModal=(confirmFun,entry)=>{
				// 	uni.showModal({
				// 	    content: entry[i].repairName,
				// 		confirmText:'收到',
				// 		title:'您有一条报修工单待确认',
				// 		confirmColor:'#1395FA',
				// 		showCancel:false,
				// 	    success: function (res) {
				// 	        if (res.confirm) {
				// 				confirmFun(entry[i])
				// 				i++
				// 	            if(i < entry.length){
				// 					showModal(confirmFun,entry)
				// 				}else{
				// 					uni.navigateTo({
				// 						url:'/pages/home/repairWaiting/repairWaiting'
				// 					})
				// 				}
				// 	        } else if (res.cancel) {
				// 	            console.log('用户点击取消');
				// 	        }
				// 	    }
				// 	});
				// }

				// const func = (i)=>{
				// 	let socketData={
				// 		type:this.repairType,
				// 		data:{
				// 			repairId:i.repairId
				// 		}
				// 	}
				// 	this.WEBSOCKET_SEND(JSON.stringify(socketData))
				// 	console.log('用户点击确定',socketData)
				// }
				// showModal(func,val)
			}
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import "uview-ui/index.scss";

	//uni模态框样式
	uni-modal .uni-modal__title {
		font-size: 16px;
	}

	uni-modal .uni-modal__bd {
		font-size: 14px;
	}

	body {
		font-size: $uni-font-size-lg;
		font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
		color: $uni-text-color;
		background-color: #F5F6FA;
	}

	image {
		width: 100%;
		height: 100%;
	}

	/* 去除滚动条 */
	::-webkit-scrollbar {
		display: none;
	}

	/* 最外层包装 */
	.warpper {
		min-height: 300rpx;
		padding: $nl-padding-top-main 32rpx;
		background-image: url(static/tbbj.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
	}

	/* 最外层包装 无背景 */
	.no-warpper {
		min-height: 300rpx;
		padding: $nl-padding-top-main 32rpx;
	}	
	/* 带阴影的box框 */
	.nl-shadow-box {
		box-shadow: $nl-box-shadow-grey;
		background-color: $uni-bg-color;
		border-radius: $nl-border-radius-main;
		overflow: hidden;
	}

	.nl-box-padding {
		padding: 0 20rpx;
	}

	/* 标题 flex 样式 */
	.nl-flex-title {
		display: flex;
		min-height: 100rpx;
		align-items: center;
		padding: 0 24rpx;
		color: $nl-text-color-grey;
		font-size: $uni-font-size-base;
		border-bottom: 2rpx solid $uni-bg-color-grey;
	}

	/*  列表 flex 样式 */
	.nl-flex-list {
		display: flex;
		min-height: 100rpx;
		align-items: center;
		padding: 0 24rpx;
		font-size: $uni-font-size-base;
		border-bottom: 2rpx solid $uni-bg-color-grey;

		.right {
			margin-left: auto;
		}

		.right-grey {
			max-width: 364rpx;
			margin-left: auto;
			color: $nl-text-color-grey;
		}

		.right-grey.u-skeleton-rect {
			min-width: 300rpx;
			min-height: 40rpx;
			text-align: right;
		}

		.margin-left {
			margin-left: 12rpx;
		}
	}

	.nl-flex-list.active:active {
		background-color: $uni-bg-color-grey;
	}

	/* 提交订单 */
	.nl-place-order {
		padding: 24rpx;
		display: flex;
		align-items: center;

		.text {
			color: $nl-color-main;
			margin-right: auto;
		}
	}

	/* ---- 按钮 ---- */
	button::after {
		border: none;
	}

	/* 最大的按钮 */
	.button-lg {
		width: 100%;
		text-align: center;
		padding: 40rpx 0;

		button {
			width: 546rpx;
			height: 88rpx;
			line-height: 88rpx;
			background-color: $nl-color-main;
			color: #FFFFFF;
			border-radius: 200rpx;
			border: none;
			font-weight: Bold;
			font-size: $uni-font-size-lg;
			box-shadow: 0 2rpx 14rpx rgba(21, 133, 252, 0.75);
		}

		// 收楼验房有记录时的button
		.have-record-hutton {
			background: rgba(255, 189, 23, 0.25);
			box-shadow: none;
		}

		button:active {
			box-shadow: none
		}
	}

	.button-lg-grey {
		width: 100%;
		text-align: center;
		padding: 40rpx 0;

		button {
			width: 546rpx;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #FFFFFF;
			color: #747272;
			border-radius: 200rpx;
			border: 2rpx solid $nl-text-color-auxiliary;
			font-size: $uni-font-size-lg;

		}

		button:active {
			box-shadow: none
		}
	}

	/* 小按钮 */
	.button-sm {
		button {
			padding: 0 40rpx;
			height: 68rpx;
			line-height: 68rpx;
			background-color: $nl-color-main;
			color: #FFFFFF;
			border-radius: 100rpx;
			border: none;
			font-size: $uni-font-size-lg;
			box-shadow: 0 2rpx 14rpx rgba(21, 133, 252, 0.75);
		}

		button:active {
			box-shadow: none
		}
	}

	/* 最小按钮无背景色 */
	.button-mini-no {
		display: inline-block;

		button {
			height: 38rpx;
			line-height: 38rpx;
			background-color: $uni-text-color-inverse;
			color: #1585FC;
			border-radius: 6rpx;
			border: none;
			font-size: $uni-font-size-sm;
			border: 2rpx solid #1585FC;
		}

		button:active {
			box-shadow: none
		}
	}

	/* 最小按钮有背景色 */
	.button-mini-yes {
		display: inline-block;

		button {
			height: 38rpx;
			line-height: 38rpx;
			background-color: $nl-color-main;
			color: $uni-text-color-inverse;
			border-radius: 20rpx;
			border: none;
			font-size: $uni-font-size-sm;
		}

		button:active {
			box-shadow: none
		}
	}

	/* 最小按钮 */
	.button-mini {
		display: inline-block;

		button {
			height: 56rpx;
			line-height: 56rpx;
			color: $uni-text-color-inverse;
			border-radius: 8rpx;
			border: none;
			font-size: $uni-font-size-sm;
		}

		button:active {
			box-shadow: none
		}
	}

	/* 主色 */
	.button-mini.main {
		button {
			background-color: $nl-color-main;
		}
	}

	/* 白色 */
	.button-mini.line {
		button {
			background-color: #FFFFFF;
			border: 2rpx solid $nl-color-main;
			color: $nl-color-main;
		}
	}

	/* 黄色 */
	.button-mini.yellow {
		button {
			background-color: #FFC02D;
		}
	}

	/* 红色 */
	.button-mini.red {
		button {
			background-color: #F6635A;
		}
	}
	/* 绿色 */
	.button-mini.green{
		button{
			background-color: #19be6b;
		}
	}

	/* 左边距 */
	.button-mini.m8 {
		margin-left: 16rpx;
	}

	/* ---- tabs切换 ---- */
	.tabs-box {
		width: 100%;
		min-height: 72rpx;
	}

	/* ---- 边距 ---- */
	/* 上边距 */
	.nl-margin-top {
		margin-top: 32rpx;
	}

	/* 下边距 */
	.nl-margin-bottom {
		margin-bottom: 32rpx;
	}

	/* 右边距 */
	.nl-margin-right {
		margin-right: 32rpx;
	}

	/* 最小右边距 */
	.nl-margin-right-sm {
		margin-right: 20rpx;
	}

	/* 最小下边距 */
	.nl-margin-bottom-sm {
		margin-bottom: 12rpx;
	}

	/* 中等下边距 */
	.nl-margin-bottom-md {
		margin-bottom: 24rpx;
	}

	/* uview，input宽度调整 */
	.input {
		flex: 1;
	}

	/* 卡片样式 */
	/* 维修待办、 */
	.card-box {
		margin-bottom: 46rpx;

		.nl-flex-list {
			min-height: 80rpx;
			border-bottom: none
		}

		.title {
			view {
				color: #576675
			}

			text {
				margin-left: auto;
				font-size: $uni-font-size-sm
			}

			.blue {
				color: $uni-color-primary
			}

			.yellow {
				color: $uni-color-error
			}

			.red {
				color: $uni-color-warning
			}
		}

		.content {
			width: 100%;
			background-color: #F3F9FF;
			padding: 24rpx;
			border-radius: 8rpx;

			.item {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				font-size: $uni-font-size-base;
				margin-bottom: 12rpx;

				view:nth-child(1) {
					width: 136rpx;
					text-align-last: justify;
					color: $nl-text-color-grey;
				}

				text {
					color: $nl-text-color-grey;
				}

				view:last-of-type {
					flex: 1;
					word-break: break-all;
					word-wrap: break-word;
				}
			}

			.item:last-child {
				align-items: flex-start;
				margin-bottom: 0
			}
		}

		.botton-flex {
			display: flex;
			padding: 24rpx;
			justify-content: flex-end;
		}
	}
</style>
